<template>
  <el-dialog v-model="data.deleteVisible" width="1200" title="收件地址" align-center :close-on-click-modal="false">
    <div>
      <el-descriptions :column="4">
        <el-descriptions-item v-for="item in fieldOptions" :key="item.field" :label="item.label">{{ data.form?.[item.field] || "-" }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1">
        <el-descriptions-item label="详细地址1">{{ data.form.Address1 }}</el-descriptions-item>
        <el-descriptions-item label="详细地址2">{{ data.form.Address2 }}</el-descriptions-item>
        <el-descriptions-item label="详细地址3">{{ data.form.Address3 }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancel">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="Dialog">
// 声明接收参数
const props = defineProps({})
const data = reactive({
  deleteVisible: false,
  form: {},
})

const fieldOptions = [
  { field: "ClientUserAccount", label: "买家ID" },
  { field: "name", label: "买家姓名" },
  { field: "CompanyName", label: "公司" },
  { field: "name", label: "收件人" },

  { field: "Email", label: "邮箱" },
  { field: "Telephone", label: "联系电话" },
  { field: "xxx", label: "收件人证件/税号" },
  { field: "District", label: "区/县" },

  { field: "Country", label: "国家/地区" },
  { field: "Province", label: "州/省" },
  { field: "City", label: "城市" },

  { field: "PostCode", label: "邮编" },
  { field: "xxx", label: "门牌号" },
]
const open = (row) => {
  data.deleteVisible = true
  row.name = row.FirstName + row.LastName
  data.form = row
}

const cancel = () => {
  data.form = {}
  data.deleteVisible = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>
